<template>
    <div class="wrapper">
        <header>
            <p>发现</p>
        </header>

        <div style="height: 7vw;"></div>

        <!-- 搜索栏部分 -->
        <div class="search-bar">
            <input type="text" placeholder="搜索你感兴趣的内容" />
            <i class="fa fa-search"></i>
        </div>

        <div style="height: 5vw;"></div>

        <!-- 推荐内容部分 -->
        <div class="recommendations">
            <div class="card" v-for="(item, index) in items" :key="index" @click="navigateTo(item.url)">
                <img :src="item.image" alt="推荐图片" class="card-image" />
                <div class="card-details">
                    <p class="card-title">{{ item.title }}</p>
                    <p class="card-description">{{ item.description }}</p>
                </div>
            </div>
        </div>
        <div style="height: 7vw;"></div>
        <!-- 底部菜单部分 -->
        <Footer></Footer>
    </div>
</template>

<script>
// 导入共通组件
import Footer from '../components/Footer.vue';

export default {
    name: 'DiscoveryPage',
    data() {
        return {
            items: [
                { title: '美食佳肴', description: '发现附近美食', image:require('../assets/dcfl01.png'), url: 'business01' },
                { title: '暖心早餐', description: '为一天拉起帷幕', image: require('../assets/dcfl02.png'), url: 'business02' },
                { title: '跑腿代购', description: '为您分忧解劳', image: require('../assets/dcfl03.png'), url: 'business03' },
                { title: '汉堡披萨', description: '快速补充能量与获取饱足感', image: require('../assets/dcfl04.png'), url: 'business04' },
                { title: '甜品饮品', description: '糖分提高您嘴角的弧度', image: require('../assets/dcfl05.png'), url: 'business05' },
                { title: '速食简餐', description: '不愿等候？为您快速上餐', image:require('../assets/dcfl06.png'), url: 'business06' },
                { title: '地方小吃', description: '品味在地美味', image: require('../assets/dcfl07.png'), url: 'business07' },
                { title: '米粉面馆', description: '来场热量爆炸的淀粉狂欢', image: require('../assets/dcfl08.png'), url: 'business08' },
                { title: '包子粥铺', description: '来一份包子和粥吧', image: require('../assets/dcfl09.png'), url: 'business09' },
                { title: '炸鸡炸串', description: '深夜美食的不二选择', image: require('../assets/dcfl10.png'), url: 'business10' }
            ]
        }
    },
    methods: {
        navigateTo(url) {
            // 导航到指定页面
            switch (url) {
                case 'business01':
                    this.toBusinessList(1);
                    break;
                case 'business02':
                    this.toBusinessList(2);
                    break;
                case 'business03':
                    this.toBusinessList(3);
                    break;
                case 'business04':
                    this.toBusinessList(4);
                    break;
                case 'business05':
                    this.toBusinessList(5);
                    break;
                case 'business06':
                    this.toBusinessList(6);
                    break;
                case 'business07':
                    this.toBusinessList(7);
                    break;
                case 'business08':
                    this.toBusinessList(8);
                    break;
                case 'business09':
                    this.toBusinessList(9);
                    break;
                case 'business10':
                    this.toBusinessList(10);
                    break;
            }

        },
        toBusinessList(orderTypeId) {
            this.$router.push({ path: '/businessList', query: { orderTypeId: orderTypeId } });
        },
    },
    components: {
        Footer
    }
}
</script>

<style scoped>
/* General styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.wrapper {
    padding: 4vw;
}

header {
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.6vw;

    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* Search bar styles */
.search-bar {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 20vw;
    padding: 3vw;
    margin: 3vw 0;
}

.search-bar input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 4vw;
}

.search-bar i {
    color: #666;
    margin-left: 10vw;
    font-size: 4.3vw;
}

/* Recommendations styles */
.recommendations {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.card {
    width: calc(50% - 5.6vw);
    margin-bottom: 5%;
    background-color: #fff;
    border-radius: 5vw;
    box-shadow: 0 4vw 8vw rgba(0, 0, 0, 0.1);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6vw 12vw rgba(0, 0, 0, 0.15);
}

.card-image {
    width: 100%;
    height: 30vw;
    object-fit: cover;
}

.card-details {
    padding: 3vw;
}

.card-title {
    font-size: 4.6vw;
    font-weight: bold;
    margin-bottom: 3vw;
}

.card-description {
    font-size: 3.5vw;
    color: #666;
}

/********** 底部菜单部分 *********/
</style>